<template>
	<view class="cart-coupon-wrapper">
		<view :class="['cart-coupon',coupon.isUse===2?'coupon-item-dis':'']">
			<view class="left" v-if="coupon.id">
				<view class="u-m-t-16 u-m-b-16">
					<text class="u-font-28" v-if="coupon.activity">{{coupon.activity.ruleType == 0 ? '￥':'折'}}</text>
					<text class="u-font-28" v-if="!coupon.activity">{{coupon.ruleType == 0 ? '￥':'折'}}</text>
					<text class="u-font-60">{{((coupon.activity && coupon.activity.ruleType == 0)||coupon.ruleType == 0)?parseFloat(coupon.activityRuleList?coupon.activityRuleList[0].couponAmount: coupon.activityRule.couponAmount):parseFloat(coupon.activityRuleList?coupon.activityRuleList[0].discountRate*10: coupon.activityRule.discountRate*10)}}</text>
				</view>
				<view class="u-font-24">
					满{{parseFloat(coupon.activityRuleList?coupon.activityRuleList[0].limitWhere:coupon.activityRule.limitWhere)}}元可用
				</view>
			</view>
			<view class="center">
				<view class="u-font-bold u-main-color u-font-32">
					{{coupon.activityName || coupon.activity.activityName}}
				</view>
				<view v-if="type==7" class="u-type-error u-font-24 u-font-bold">
					差{{parseFloat(coupon.diffAmount)}}元可用该券
				</view>
				<view class="u-font-24" v-if="coupon.id">
					{{(coupon.startDate).substring(0,10)}}前有效
				</view>
			</view>
			<view class="right">
				<view class="coupon-btn type1" v-if="type == 1" @click="couponSave">
					立即领取
				</view>
				<view class="coupon-btn type2" v-if="type == 2">
					已领取
				</view>
				<view class="coupon-btn type3" v-if="type == 3">
					再逛逛
				</view>
				<view class="coupon-btn type4" v-if="type == 4" @click="couponUse">
					去使用
				</view>
				<view class="coupon-btn type5" v-if="type == 5">
					已失效
				</view>
				<view class="coupon-btn type6" v-if="type == 6"></view>
				<view class="coupon-btn type7" v-if="type == 7" @click="couponUse">去凑单</view>
			</view>
			<view class="dot float-top" :style="dotStyle"></view>
			<view class="dot float-bottom" :style="dotStyle"></view>
			<view v-if="received && type == 4" class="received">
				<u-image width="100rpx" height="100rpx" src="@/static/images/recived.png"></u-image>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapActions, mapState, mapMutations } from 'vuex';
	export default{
		props:{
			type:{
				type:[Number, String],
				default:1 // 1 购物车领取 2 已领取 3 购物车不满足使用条件 再逛逛 4 去使用 5 已失效 6 无操作按钮 7 去凑单
			},
			coupon:{
				type:Object,
				default:()=>{}
			},
			dotStyle:{
				type:Object,
				default:()=>{}
			},
			received:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return {
				// coupon:{
				// 	activityName: "全品类可用",
				// 	couponSource: "200",
				// 	limitWhere: "1000"
				// }
			}
		},
		methods:{
			...mapActions([
				'ActMembercouponSave'
			]),
			async couponSave() {
				const res = await this.ActMembercouponSave({
					activityId:this.coupon.id
				})
				if(res.success){
					this.$u.toast('领取成功！')
				}
				this.$emit('afterSave')
			},
			couponUse(){
				this.$u.route({
					url:"pages/goods/goodsList",
					params:{
						activityId:this.coupon.goodsType ==0?'':(this.coupon.id || this.coupon.activityId),
						activityName:this.coupon.goodsType ==0?'':(this.coupon.activityName || this.coupon.activity.activityName),
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cart-coupon-wrapper{
		overflow: hidden;
	}
	.cart-coupon{
		// width: 700rpx;
		height: 176rpx;
		background: #fff7e9;
		border-radius: 8rpx;
		padding: 8rpx;
		border:1rpx solid rgba(255,79,57,0.20);
		display: flex;
		justify-content: space-between;
		position: relative;
		.left{
			width: 200rpx;
			height: 160rpx;
			background: #ff4f39;
			border-radius: 8rpx;
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex-shrink: 0;
			.u-font-60{
				font-size: 60rpx;
			}
		}
		.center{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 100%;
			padding: 0 16rpx;
		}
		.right{
			width: 180rpx;
			border-left: 1rpx dashed rgba(255,79,57,0.20);
			height: 100%;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			.coupon-btn{
				line-height: 64rpx;
				text-align: center;
				width: 146rpx;
				text-align: center;
				font-size: 24rpx;
			}
			.type1{
				background: $u-type-error;
				color: #fff;
				border-radius: 64rpx;
			}
			.type2{
				background: $u-tips-color;
				color: #fff;
				border-radius: 64rpx;
			}
			.type3{
				border: 1px solid #ff4f39;
				color: #ff4f39;
				border-radius: 64rpx;
			}
			.type4{
				background: $u-type-error;
				color: #fff;
				border-radius: 64rpx;
			}
			.type5{
				background: #CCCCCC;
				color: #fff;
				border-radius: 64rpx;
			}
			.type7{
				border: 1px solid #ff4f39;
				color: #ff4f39;
				border-radius: 64rpx;
			}
		}
		.dot{
			width: 20rpx;
			height: 20rpx;
			border: 1rpx solid rgba(255,79,57,0.20);
			border-radius: 100%;
			position: absolute;
			background-color: #fff;
			right: 176rpx;
		}
		.float-top{
			top: -10rpx;
		}
		.float-bottom{
			bottom: -10rpx;
		}
		.received{
			position: absolute;
			bottom:18rpx;
			right: 204rpx;
		}
	}
	.coupon-item-dis.cart-coupon{
		background: #fff;
		border:1rpx solid rgba(204,204,204,0.7);
		.left{
			background: #ccc;
		}
		.center{
			color:$u-tips-color;
		}
		.right{
			border-left: 1rpx dashed rgba(204,204,204,0.7);
			.type4{
				background: #ccc;
				color: #fff;
				border-radius: 64rpx;
			}
		}
		.dot{
			border: 1rpx solid rgba(204,204,204,0.7);
			background-color: #fff;
		}
	}
</style>
